<template>
  <div
    key="text"
    class="clear-fix k-btn-wrap"
  >
    <ul
      class="fl num-ul"
      :style="cp_left"
    >
      <li
        v-for="(row, idx) in cp_ordinary"
        :key="idx"
        class="clear-fix k-row"
        :class="{['k-row-' + cp_ordinary.length]: 1}"
      >
        <template
          v-for="(btn, i) in row"
        >
          <span
            v-if="btn.expect === 'delete'"
            :key="i"
            class="fl k-btn"
            :class="['k-' + btn.type, 'k-btn-' + row.length, {active: active === `l_${idx}_${i}`}]"
            @click.stop="pressClick($event, btn)"
            @touchstart.stop="deleteClick($event, btn, `l_${idx}_${i}`)"
            @touchend.stop="pressUp"
            @mousedown.stop="deleteClick($event, btn, `${idx}_${i}`)"
            @mouseup.stop="pressUp"
          >{{ btn.view || btn.text }}</span>
          <span
            v-else
            :key="i"
            class="fl k-btn"
            :class="['k-' + btn.type, 'k-btn-' + row.length, {active: active === `l_${idx}_${i}`}]"
            @touchstart.stop="active = `l_${idx}_${i}`"
            @touchend.stop="btnClick($event, btn)"
            @mousedown.stop="!mobile && (active = `${idx}_${i}`)"
            @mouseup.stop="btnClick($event, btn)"
          >{{ btn.view || btn.text }}</span>
        </template>
      </li>
    </ul>
    <ul
      class="fr sym-ul sym-pad"
      :style="cp_right"
    >
      <li
        v-for="(row, idx) in cp_large"
        :key="idx"
        class="k-row"
        :class="{['k-row-' + cp_large.length]: 1}"
      >
        <template
          v-for="(btn, i) in row"
        >
          <span
            v-if="btn.expect === 'delete'"
            :key="i"
            class="k-btn"
            :class="['k-' + btn.type, 'k-btn-' + row.length, {active: active === `${idx}_${i}`}]"
            @touchstart.stop="deleteClick($event, btn, `${idx}_${i}`)"
            @touchend.stop="pressUp"
            @click.stop="pressClick($event, btn)"
          >{{ btn.view || btn.text }}</span>
          <span
            v-else
            :key="i"
            class="k-btn"
            :class="['k-' + btn.type, 'k-btn-' + row.length, {active: active === `${idx}_${i}`, 'k-disable': payload.mType * 1 === 26 && btn.expect === 'next', disable: disableBtn.includes(btn.expect)}]"
            @touchstart.stop="startClick(`${idx}_${i}`, payload.mType * 1 === 26 && btn.expect === 'next')"
            @touchend.stop="btnClick($event, btn)"
            @mousedown.stop="!mobile && startClick(`${idx}_${i}`, payload.mType * 1 === 26 && btn.expect === 'next')"
            @mouseup.stop="btnClick($event, btn)"
          >{{ btn.view || btn.text }}</span>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
/******************/
/******************/
// region    //import
import { KeepPress } from './index';
import { $extend } from './utils';

// endregion

/******************/
/******************/
// region    //initialize

// endregion

/******************/
/******************/
// region    //export

export default {
    name: 'TheConstant',
    props: {
        boardData: {
            type: Object,
            required: true,
        },
        payload: {
            type: Object,
            default () {
                return {
                    mType: '',
                };
            },
        },
        mobile: {
            type: Boolean,
            default: true,
        },
        disableBtn: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    data () {
        let press = new KeepPress();
        return {
            pressDown: press.down(($event, data) => {
                if (this.boardType !== 'vertical') {
                    this.active = '';
                    this.$emit('keep-press', $event, data);
                }
            }, 1000),
            pressUp: press.up((e) => {
                this.active = '';
                this.$emit('btn-click', e, {
                    'text': '删除',
                    'type': 'symbol delete',
                    'expect': 'delete',
                });
            }),
            pressClick: press.click(($event, data) => {
                this.active = '';
                this.$emit('btn-click', $event, data);
            }),
            active: '',
        };
    },
    computed: {
        cp_right () {
            return this.cp_large && {
                width: '20%',
            } || {
                display: 'none',
            };
        },
        cp_left () {
            return this.cp_large && {
                width: '80%',
            };
        },
        cp_ordinary () {
            let { keysText: { ordinary } } = this.boardData;
            if (this.payload.pattern === 'js') {
                ordinary = $extend(true, [], ordinary);
                Object.assign(ordinary[3].find(s => s.text === '\\S*\\frac {\\S*} {\\S*}') || {}, {
                    view: '°(度)',
                    text: '°',
                    type: 'symbol',
                    expect: '',
                });
            }
            return ordinary;
        },
        cp_large () {
            // eslint-disable-next-line no-unused-vars
            let { keysText: { large }, prevBoardType } = this.boardData;

            return large;
        },
    },
    mounted,
    methods: {
        btnClick ($event, btn) {
            if (this.payload.mType * 1 === 26 && btn.expect === 'next') return;
            this.active = '';
            this.$emit('btn-click', $event, btn);
        },
        startClick (cls, prevent) {
            if (prevent) return;
            this.active = cls;
        },
        deleteClick ($event, btn, cls) {
            this.active = cls;
            this.pressDown($event, btn);
        },
    },
};
// endregion

/******************/
/******************/
// region    //function

/**
   *组件挂载成功执行函数
   */
function mounted () {
}

// endregion

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

  .num-ul, .sym-pad {
    height: 100%;
    width: 100%;
  }

  .k-btn-wrap {
    position: relative;
  }

  .sym-aside, .k-btn-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    background: #f5f7f8;
  }

  .k-btn-box {
    z-index: 0;
  }
</style>
